<template>
  <div class="app-container">
    <div class="header">
      <!-- 导航按钮 -->
      <el-button type="primary" plain size="small" @click="handleAdd"
        >监测配置</el-button
      >
      <el-button type="primary" plain size="small" @click="handleAddEnvSpectrum"
        >环境光谱</el-button
      >
      <el-button type="primary" plain size="small" @click="handleAdd"
        >导入模型</el-button
      >
      <el-button type="primary" plain size="small" @click="handleAdd"
        >开始分析</el-button
      >
      <el-button type="primary" plain size="small" @click="handleViewHistory"
        >查询分析历史</el-button
      >
    </div>
    <div class="content">
      <!-- 左侧图表区域 -->
      <div class="left-chart">
        <!-- 样品吸光度曲线图 -->
        <div class="chart-title">样品吸光度曲线</div>
        <div class="chart-area"></div>
      </div>

      <!-- 右侧图表区域 -->
      <div class="right-chart">
        <!-- 水含量预测曲线图 -->
        <div class="chart-title">水含量预测曲线</div>
        <div class="chart-area"></div>
      </div>
    </div>

    <div class="table">
      <el-table
        v-loading="loading"
        :data="dfbList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column
          label="分析结果编号"
          align="center"
          prop="onlineResultNo"
        />
        <el-table-column
          label="成分名称"
          align="center"
          prop="constituentName"
        />
        <el-table-column label="预测值" align="center" prop="predicted" />
        <el-table-column label="模型编号" align="center" prop="modelNo" />
        <el-table-column
          label="部门名称"
          align="center"
          prop="departmentName"
        />
        <el-table-column label="仪器编号" align="center" prop="instrumentNo" />
        <el-table-column
          label="仪器名称"
          align="center"
          prop="instrumentName"
        />
        <el-table-column
          label="采样时间"
          align="center"
          prop="samplingTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.samplingTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['analysis:dfb:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['analysis:dfb:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog
      title="环境光谱明细"
      :visible.sync="envdialogVisible"
      width="80vw"
      append-to-body
    >
      <env-spectrum-detail
        ref="envSpectrumDetail"
        :is-row-visible="false"
        @selection-change="handleRowSelection"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEnvForm">确 定</el-button>
        <el-button @click="envdialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listZla } from "@/api/analysis/zla";
import EnvSpectrumDetail from "@/views/spectrum/env_spectrum/index.vue";

export default {
  name: "Dfb",
  components: {
    EnvSpectrumDetail,
  },
  data() {
    return {
      envdialogVisible: false,
      // 遮罩层
      loading: true,
      // 干燥流化床车间在线分析历史表格数据
      dfbList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        onlineResultNo: null,
        constituentId: null,
        constituentName: null,
        predicted: null,
        departmentName: null,
        departmentId: null,
        instrumentId: null,
        instrumentNo: null,
        instrumentName: null,
        modelId: null,
        modelNo: null,
        samplingTime: null,
        remarks: null,
        isDelete: null,
        creatorId: null,
        creator: null,
        modifierId: null,
        modifier: null,
        modifyTime: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleRowSelection(selection) {
      // 处理行选择事件
      this.$refs.envSpectrumDetail.handleSelectionChange(selection);
    },
    submitEnvForm() {
      // 提交表单
      this.envdialogVisible = false;
    },
    handleAddEnvSpectrum() {
      // 弹出对话框
      this.envdialogVisible = true;
    },

    handleAdd() {
      this.$message.info("功能正在开发中，敬请期待！...");
    },
    handleViewHistory() {
      this.$router.push("/dfb_history");
    },
    /** 查询干燥流化床车间在线分析历史列表 */
    getList() {
      this.loading = true;
      listZla(this.queryParams).then((response) => {
        this.dfbList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.onlineResultId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },
};
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-around;
}

.content {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}

.left-chart,
.right-chart {
  width: 49.5%;
  border: 1px solid #ddd;
}

.chart-title {
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: center;
}

.chart-area {
  height: 300px; /* 根据实际需要调整高度 */
  background-color: #f9f9f9;
}

/* .table {
  margin-top: 20px;
  overflow-x: auto;
}

.table-header,
.table-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding: 10px;
  text-align: left;
  font-size: 0.9em;
}

.table-header {
  background-color: #42b983;
  color: white;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}

.table-row:nth-child(even) {
  background-color: #f9f9f9;
}

.table-row:hover {
  background-color: #eee;
} */
</style>
